<template>
  <div class="shanhe-departments">
    <!-- 主体内容区 -->
    <main class="container main-content">
      <!-- 返回按钮 -->
      <div class="back-section">
        <router-link to="/adminDeptPage" class="back-link">
          <span class="back-icon">←</span>
          <span>返回</span>
        </router-link>
      </div>

      <!-- 页面标题 -->
      <div class="page-header">
        <h1>院系设置</h1>
        <p>山河大学共设33个学院、54个系、16个书院，涵盖12个学科门类</p>
      </div>
      <!-- 学科门类说明 -->
      <div class="subject-intro">
        <h3>涵盖学科门类</h3>
        <div class="subject-tags">
          <span class="tag">理学</span>
          <span class="tag">工学</span>
          <span class="tag">文学</span>
          <span class="tag">艺术学</span>
          <span class="tag">历史学</span>
          <span class="tag">哲学</span>
          <span class="tag">经济学</span>
          <span class="tag">管理学</span>
          <span class="tag">法学</span>
          <span class="tag">教育学</span>
          <span class="tag">医学</span>
          <span class="tag">交叉学科</span>
        </div>
      </div>
      <!-- 学科门类分类 -->
      <div class="subject-categories">
        <div class="category-card">
          <h2>学院（33个）</h2>
          <p class="note">注：* 为非实体学院</p>
          <div class="department-list">
            <div class="department-item" v-for="(item, index) in collegeList" :key="index">
              <router-link :to="`/departmentalDetail/${item}`">{{ item }}</router-link>
            </div>
          </div>
        </div>

        <div class="category-card">
          <h2>系（54个）</h2>
          <div class="department-list">
            <div class="department-item" v-for="(item, index) in departmentList" :key="index">
              <router-link :to="`/departmentalDetail/${item}`">{{ item }}</router-link>
            </div>
          </div>
        </div>

        <div class="category-card">
          <h2>书院（16个）</h2>
          <div class="department-list">
            <div class="department-item" v-for="(item, index) in academyList" :key="index">
              <router-link :to="`/departmentalDetail/${encodeURIComponent(item)}`">{{ item }}</router-link>
            </div>
          </div>
        </div>
      </div>

    </main>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

// 模拟院系数据（实际项目可从接口获取）
const colleges = [
  "建筑学院", "土木水利学院", "机械工程学院", "航天航空学院",
  "信息科学技术学院", "电子工程系", "计算机科学与技术系", "自动化系",
  "能源与动力工程系", "工程物理系", "化学工程系", "材料科学与工程学院",
  "环境学院", "生命科学学院", "医学院", "药学院",
  "理学院", "数学科学中心", "经济管理学院", "公共管理学院",
  "人文学院", "社会科学学院", "法学院", "新闻与传播学院",
  "艺术学院", "马克思主义学院", "国际关系学院", "体育教研部",
  "交叉信息研究院*", "高等研究院*", "人工智能研究院*"
];

const departments = [
  "数学科学系", "物理学系", "化学系", "生物科学与技术系",
  "心理学系", "中国语言文学系", "历史学系", "哲学系",
  "社会学系", "政治学系", "经济学系", "金融学系",
  "会计学系", "市场营销系", "管理科学与工程系", "工商管理系",
  "公共管理系", "法学系", "知识产权法研究中心", "新闻与传播系",
  "广告学系", "广播电视学系", "艺术史论系", "美术学院",
  "音乐学院", "设计系", "建筑系", "城市规划系",
  "景观学系", "土木工程系", "水利工程系", "机械工程系",
  "精密仪器系", "热能工程系", "汽车工程系", "工业工程系",
  "航空航天工程系", "工程力学系", "电子工程系", "计算机科学与技术系",
  "自动化系", "信息与通信工程系", "软件学院", "网络科学与网络空间安全研究院",
  "能源与动力工程系", "工程物理系", "核科学与技术学院", "化学工程系",
  "材料科学与工程系", "环境科学与工程系", "给排水科学与工程系", "生命科学学院",
  "医学院", "药学院", "基础医学系", "临床医学系"
];

const academies = [
  "求真书院", "为先书院", "行健书院", "未央书院",
  "日新书院", "致理书院", "明德书院", "法学院书院",
  "经济管理学院书院", "人文学院书院", "社会科学学院书院", "新闻与传播学院书院",
  "艺术学院书院", "马克思主义学院书院", "国际关系学院书院"
];

// 将数据改为响应式变量，便于刷新
const collegeList = ref(colleges);
const departmentList = ref(departments);
const academyList = ref(academies);

// 监听路由变化，重新赋值数据（模拟数据刷新）
watch(
  () => route.path,
  () => {
    // 重新赋值数据
    collegeList.value = [...colleges];
    departmentList.value = [...departments];
    academyList.value = [...academies];
  },
  { immediate: true }
);
</script>

<style scoped>
/* 全局样式重置 
 {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
}*/
/* 主容器样式 */
.shanhe-departments {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

/* 主体内容样式 */
.main-content {
  padding: 30px 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 10px;
}

.page-header h1 {
  font-size: 36px;
  color: #333;
  margin-bottom: 12px;
}

.page-header p {
  font-size: 18px;
  color: #666;
}

/* 分类卡片样式 */
.subject-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 48px;
  background-color: #ffffff;
}

.category-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.category-card h2 {
  font-size: 20px;
  color: #1a5e95;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e0e0e0;
}

.note {
  color: #999;
  font-size: 14px;
  margin-bottom: 16px;
}

/* 院系列表样式 */
.department-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.department-item router-link {
  color: #333;
  padding: 6px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  font-size: 14px;
  transition: all 0.3s;
}

.department-item router-link:hover {
  background-color: #1a5e95;
  color: #fff;
  border-color: #1a5e95;
}

/* 学科门类标签样式 */
.subject-intro {
  text-align: center;
}

.subject-intro h3 {
  font-size: 22px;
  color: #333;
  margin-bottom: 8px;
}

.subject-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
}

.tag {
  display: inline-block;
  padding: 8px 20px;
  background-color: #f5f5f5;
  color: #333;
  border-radius: 24px;
  font-size: 16px;
}


/* 响应式适配 */
@media (max-width: 1200px) {
  .container {
    width: 100%;
  }
}

@media (max-width: 992px) {
  .subject-categories {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .subject-categories {
    grid-template-columns: 1fr;
  }

  .page-header h1 {
    font-size: 28px;
  }
}
</style>